<template>
  <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <van-cell v-for="(item, index) in list" :key="item.filmId">
      <template #title>
        <filmItem :data="item"></filmItem>
      </template>
    </van-cell>
  </van-list>
</template>

<script>
import filmItem from '@/components/filmItem'
export default {
  components: {
    filmItem
  },
  props: ['getData'],
  data() {
    return {
      list: [],
      // 是否加载，如果为true则会触发onLoad事件来加载数据
      loading: true,
      // 此属性如果为true则不进行onLoad加载
      finished: false,
      // 页码
      page: 1
    }
  },
  activated() {
    this.list = []
    this.page = 1
    this.onLoad()
  },
  methods: {
    // 用于加载数据所用
    async onLoad() {
      let ret = await this.getData(this.page)
      if (ret.data.films.length > 0) {
        this.list.push(...ret.data.films)
        this.page++
        // 加载状态结束
        this.loading = false
      } else {
        this.$toast({
          type: 'success',
          duration: 3000,
          message: '没有更多的新数据了'
        })
        // 没有更多的新数据了
        this.finished = true
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
